<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>元素渲染</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>

  	<!-- 

			1.Babel转义器会调用React.createElement()方法把JSX转换成虚拟DOM对象(React元素)，然后通过ReactDOM.render()方法映射成真实DOM

			2.ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入到指定的DOM节点

          ReactDOM.render(template,targetDOM)方法接收两个参数：

            第一个是创建的模板，多个React元素外层需使用一个标签进行包裹，如<div>;第二个参数是插入该模板的目标位置

            若要为创建的某个元素增加class属性，不能直接定义class而要用className，因为class是javascript中的保留字

  	 -->

    <div id="root"></div>

    <script type=text/babel>

    /* const element =<h1 className="greeting">Hello, world!</h1>
         
     ReactDOM.render(
     
       <div>
         { element }
       </div>,
     
       document.getElementById('root')
     
     )*/

      function tick() {
        const element = (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {new Date().toLocaleTimeString()}.</h2>
          </div>
        );
        ReactDOM.render(
          element,
          document.getElementById('root')
        );
      }

      setInterval(tick, 1000);

    </script>
  </body>
</html>
